<template>
  <div class="container">
    <ul>
        <img :src="JSON.parse(this.$route.query.xiaod).imgbig" alt="" />
    <div class="top">
      <b></b>
      <span>{{JSON.parse(this.$route.query.xiaod).title}}</span>
     <b></b>
    </div>

    <h4 v-for="(v, i) in JSON.parse(this.$route.query.xiaod).listcontent" :key="i" @click="fun(i)">
      <router-link to="/dietDetails">
        <img :src="v.imgurl" alt="" />
      </router-link>
      <h6>
        <span>{{ v.titletext }}</span>
        <span>湿气重</span>
      </h6>
    </h4>
    <div class="more">
        <p class="wenzi">更多</p>
        <span>↓</span>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
data(){
    return{}
},

methods:{
    fun(i){
        console.log(JSON.parse(this.$route.query.xiaod).listcontent);
        let  obj=JSON.parse(this.$route.query.xiaod).listcontent[i]
        this.$router.push({name:"DietDetails",query:{xiaox:obj}})
        console.log(obj);
    }
}
}
</script>

<style scoped>
.container {
  margin-bottom: 0.6rem;
  margin-top: .1rem;
}
.container img {
  width: 100%;
  height: 1.35rem;
}
.container .more {
  text-align: center;
  height: 0.7rem;
}
.container p {
  height: 0.4rem;
  line-height: 0.5rem;
  margin-top: 0.2rem 0;
}
.top {
  height: 0.5rem;
  text-align: center;
  line-height: 0.7rem;
}
.container .top b {
  display: inline-block;
  width: 0.4rem;
  height: 0.05rem;
  border-top: 0.02rem solid;
  margin: 0 0.05rem;
}
.container .top span {
  display: inline-block;
  font-size: 0.2rem;
  font-weight: 700;
}
.container h4 {
  height: 1.5rem;
  border-bottom: 0.01rem solid #999;
}
.container h4 img {
  float: left;
  width: 1.1rem;
  height: 0.85rem;
  margin: 0.3rem 0 0 0.2rem;
}
.container h6 {
  font-weight: 700;
  float: right;
  width: 2.3rem;
  height: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 0.3rem;
}
.container h6 span:nth-child(1) {
  font-size: 0.18rem;
}
.container h6 span:nth-child(2) {
  font-size: 0.14rem;
  color: green;
  border: 0.01rem solid green;
  width: 0.6rem;
  height: 0.22rem;
  border-radius: 0.05rem;
  text-align: center;
  line-height: 0.22rem;
  margin-top: 0.1rem;
}
</style>